<template>
  <div class="bg-[#232324] h-[100%]">
    <el-collapse v-loading="loading" v-model="activeNames">
      <el-form label-width="100" :model="states" size="default">
        <el-collapse-item title="图例" name="4">
          <el-form-item label="是否显示">
            <el-switch v-model="legend.show" />
          </el-form-item>
          <el-form-item label="文字颜色">
            <el-color-picker v-model="legend.textStyle.color" />
          </el-form-item>
          <el-form-item label="文字大小">
            <el-input-number v-model="legend.textStyle.fontSize" />
          </el-form-item>
          <el-form-item label="图例方向">
            <el-select v-model="legend.orient" placeholder="Select">
              <el-option label="水平" value="horizontal" />
              <el-option label="垂直" value="vertical" />
            </el-select>
          </el-form-item>
          <el-form-item label="靠左距离">
            <el-input-number v-model="legend.left" />
          </el-form-item>
          <el-form-item label="靠顶距离">
            <el-input-number v-model="legend.top" />
          </el-form-item>
          <el-form-item label="图例高度">
            <el-input-number v-model="legend.itemHeight" />
          </el-form-item>
          <el-form-item label="图例间隔">
            <el-input-number v-model="legend.itemGap" />
          </el-form-item>
          <el-form-item label="图例宽度">
            <el-input-number v-model="legend.itemWidth" />
          </el-form-item>
          <el-form-item label="图例高度">
            <el-input-number v-model="legend.itemHeight" />
          </el-form-item>
          <el-form-item label="图例形状">
            <el-select v-model="legend.icon" placeholder="Select">
              <el-option label="圆形" value="circle" />
              <el-option label="方形" value="rect" />
              <el-option label="圆角方形" value="roundRect" />
              <el-option label="三角形" value="triangle" />
              <el-option label="菱形" value="diamond" />
              <el-option label="倒三角形" value="pin" />
              <el-option label="箭头" value="arrow" />
              <el-option label="无" value="none" />
            </el-select>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="容器" name="5">
          <el-form-item label="坐标系网格">
            <el-switch v-model="grid.show" />
          </el-form-item>
          <el-form-item label="左侧距离">
            <el-input-number v-model="grid.left" />
          </el-form-item>
          <el-form-item label="右侧距离">
            <el-input-number v-model="grid.right" />
          </el-form-item>
          <el-form-item label="顶部距离">
            <el-input-number v-model="grid.top" />
          </el-form-item>
          <el-form-item label="底部距离">
            <el-input-number v-model="grid.bottom" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="提示框" name="6">
          <el-form-item label="是否显示">
            <el-switch v-model="tooltip.show" />
          </el-form-item>
          <el-form-item label="提示框触发">
            <el-select v-model="tooltip.trigger" placeholder="Select">
              <el-option label="数据项图形触发" value="item" />
              <el-option label="坐标轴触发" value="axis" />
              <el-option label="不触发" value="none" />
            </el-select>
          </el-form-item>
          <el-form-item label="提示框背景">
            <el-color-picker v-model="tooltip.backgroundColor" />
          </el-form-item>
          <el-form-item label="提示框文字">
            <el-color-picker v-model="tooltip.textStyle.color" />
          </el-form-item>
          <el-form-item label="提示文字大小">
            <el-input-number v-model="tooltip.textStyle.fontSize" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item
          :title="`饼图`"
          :name="i + 1 + 'pie'"
          v-for="(item, i) in states"
          :key="item.name + i + 'a'"
        >
          <el-form-item label="中心横坐标">
            <el-input v-model="item.center[0]" />
          </el-form-item>
          <el-form-item label="中心纵坐标">
            <el-input v-model="item.center[1]" />
          </el-form-item>
          <el-form-item label="饼图内径">
            <el-input v-model="item.radius[0]" />
          </el-form-item>
          <el-form-item label="饼图外径">
            <el-input v-model="item.radius[1]" />
          </el-form-item>
          <el-form-item label="饼图圆角">
            <el-input-number v-model="item.itemStyle.borderRadius" />
          </el-form-item>
          <el-form-item label="饼图边框宽度">
            <el-input-number v-model="item.itemStyle.borderWidth" />
          </el-form-item>
          <el-form-item label="饼图边框颜色">
            <el-color-picker v-model="item.itemStyle.borderColor" />
          </el-form-item>
          <el-form-item label="选中模式">
            <el-select v-model="item.selectedMode" placeholder="Select">
              <el-option label="不选" value="false" />
              <el-option label="单选" value="single" />
              <el-option label="多选" value="multiple" />
              <el-option label="整个系列" value="series" />
            </el-select>
          </el-form-item>
          <el-form-item label="取消高亮">
            <el-switch v-model="item.emphasis.disabled" />
          </el-form-item>
          <el-form-item label="高亮选项">
            <el-select v-model="item.emphasis.focus" placeholder="Select">
              <el-option label="聚焦系列所有图形" value="series" />
              <el-option label="聚焦当前数据图形" value="self" />
              <el-option label="不淡出其它图形" value="none" />
            </el-select>
          </el-form-item>
          <el-form-item label="视觉引导线">
            <el-switch v-model="item.labelLine.show" />
          </el-form-item>
          <el-form-item label="平滑引导线">
            <el-switch v-model="item.labelLine.smooth" />
          </el-form-item>

          <el-form-item label="标签文字">
            <el-switch v-model="item.label.show" />
          </el-form-item>
          <el-form-item label="标签文字位置">
            <el-select v-model="item.label.position" placeholder="Select">
              <el-option label="饼图中心" value="center" />
              <el-option label="扇区外侧" value="outside" />
              <el-option label="扇区内部" value="inside" />
            </el-select>
          </el-form-item>

          <el-form-item label="标签文字大小">
            <el-input-number v-model="item.label.fontSize" />
          </el-form-item>
          <!-- <el-form-item label="标签文字颜色">
            <el-color-picker v-model="item.label.color" />
          </el-form-item> -->
        </el-collapse-item>
      </el-form>
    </el-collapse>
  </div>
</template>

<script setup>
import { onMounted, watch, ref, reactive, computed } from "vue";
const loading = ref(true);
const activeNames = ref();
const props = defineProps({
  models: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["update:models", "edit"]);
let states = ref(null);
onMounted(() => {
  states.value = JSON.parse(JSON.stringify(props.models.series));

  setTimeout(() => {
    loading.value = false;
  }, 200);
});

let legend = computed({
  get() {
    return props.models.legend;
  },
  set(val) {
    emit("update:models", { ...props.models, legend: val });
  },
});
let grid = computed({
  get() {
    return props.models.grid;
  },
  set(val) {
    emit("update:models", { ...props.models, grid: val });
  },
});
let tooltip = computed({
  get() {
    return props.models.tooltip;
  },
  set(val) {
    emit("update:models", { ...props.models, tooltip: val });
  },
});
watch(
  () => states.value,
  (val) => {
    emit("update:models", { ...props.models, series: val });
  },
  {
    deep: true,
  }
);
</script>

<style scoped lang="scss">
:deep(.el-collapse-item__header) {
  padding-left: 10px !important;
}

:deep(.el-input) {
  width: 180px !important;
}
:deep(.el-select) {
  width: 180px !important;
}
</style>
